
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>吸顶灯实现</title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			/* 顶部效果 */
			.top_content{
				height: 200px;
				line-height: 200px;
				text-align: center;
				background-color: #ebebeb;
			}
			/* 吸顶灯效果，默认 */
			.sticky{
				background-color: #5e5e5e;
				height: 60px;
				line-height: 50px;
				text-align: center;
				color: white;
			}
			/* 页面主区域 */
			.main_content{
				height: 8000px;
				background-color: #eee;
			}
			/* 吸顶灯效果：定死页面顶部效果 */
			.active{
				position: fixed;
				top: 0;
				width: 100%;
			}
		</style>
		<script src="js/jquery-1.11.1.js"></script>
		<script>
			$(function(){
				// JQ操作  滚动下拉条  超过200px  吸顶灯定死页面
				//①固定值：获取到达吸顶灯位置的偏移量
				var so=$(".sticky").offset().top;
				//$window 监听窗口的时间：滚动，窗口视图大小
				//scroll() 监听页面滚动事件
				$(Window).scroll(function(){
					//超过200px：  动态值》固定值200   条件满足  页面吸顶灯
					//②获取页面滚动值 动态值
					var st=$(window).scrollTop()
					if(st>so){
						$(".sticky").addClass("active");
					}else{
						$(".sticky").removeClass("active");
					}
				});
			});
		</script>
	</head>
	<body>
		<div class="top_content">顶部内容区域</div>
		<div class="sticky">我是吸顶灯元素区域</div>
		<div class="main_content">Lorem ipsum dolor 
		sit amet consectetur adipisicing elit. 
		Quia sint, incidunt, ipsa laborum eligendi eos saepe harum 
		culpa dolore, consectetur qui aut! Laboriosam magnam earum aut ad quia. Architecto, itaque.，
		Lorem ipsum dolor sit amet consectetur adipisicing elit.
		 Aliquam minima accusantium odio voluptatum corporis ad, 
		 ullam illum id laboriosam. Fugiat aliquid ex temporibus 
		 nemo porro esse distinctio vitae voluptates facilis!</div>
	</body>
</html>